<template>
  <view class="my-page">
    <!-- 个人信息卡片 -->
    <view class="profile-card">
      <view class="avatar-section">
        <view class="avatar-container">
          <image class="avatar" :src="userInfo.avatar||'https://picsum.photos/200/200?random=1'" mode="aspectFill"></image>
        </view>
        <view class="user-info">
          <text class="user-name" v-if="userInfo.user_name">{{userInfo.user_name }}</text>
		  <text class="user-name" v-else @click="login">{{'去登录'}}</text>
          <view>
            <text class="user-id" style="margin-right: 20rpx;" > {{userInfo.city_name || '' }} </text>
			<text class="user-id" v-if="userInfo.dept_name">{{userInfo.dept_name}}</text>
			<text v-if="userInfo.user_type != '01'" class="user-id" style="margin-left: 30rpx; background: #ffa0a2; padding: 3rpx 10rpx; border-radius: 15rpx; ">管理员</text>
          </view>
        </view>
        <view class="edit-btn" @click="editProfile">
          <uni-icons type="compose" size="20" color="#fff"></uni-icons>
        </view>
      </view>
      
      <!-- 数据统计 -->
      <view class="stats-container">
        <view class="stat-item" @click="goTo('performance')">
          <text class="stat-value">{{userInfo.performance.this_year_count || 0}}</text>
          <text class="stat-label">本年度业绩</text>
        </view>
        <view class="stat-item" @click="goTo('rank')">
			<text class="stat-value" v-if="userInfo.performance.team_rank=='未上榜'"> {{userInfo.performance.team_rank}}</text>
          <text v-else class="stat-value">{{userInfo.performance.team_rank || 0}}/{{userInfo.performance.team_total_count || 0}}</text>
          <text class="stat-label">团队排名</text>
        </view>
        <view class="stat-item" @click="goTo('customers')">
          <text class="stat-value">{{userInfo.performance.this_month_count || 0}}</text>
          <text class="stat-label">本月业绩</text>
        </view>
      </view>
    </view>
    
    <!-- 功能菜单 -->
    <view class="menu-container">
      <!-- 业务功能 -->
      <view class="menu-group">
        <view class="group-title">业务功能</view>
        <view class="menu-item" @click="goTo('/pages/mine/order/order')">
          <view class="menu-icon-text">
            <uni-icons type="list" size="20" color="#007bff"></uni-icons>
            <text class="menu-text">团队报单</text>
          </view>
          <uni-icons color="#cfcfcf" type="right" size="16"></uni-icons>
        </view>
        
        <!-- <view class="menu-item" @click="goTo('/pages/mine/customer-order/customer-order')">
          <view class="menu-icon-text">
            <uni-icons type="person" size="20" color="#007bff"></uni-icons>
            <text class="menu-text">我的客户</text>
          </view>
          <uni-icons color="#cfcfcf" type="right" size="16"></uni-icons>
        </view> -->
        
        <!-- <view class="menu-item" @click="goTo('team')">
          <view class="menu-icon-text">
            <uni-icons type="staff" size="20" color="#007bff"></uni-icons>
            <text class="menu-text">我的团队</text>
          </view>
          <uni-icons color="#cfcfcf" type="right" size="16"></uni-icons>
        </view> -->
      </view>
      
      <!-- 系统管理 -->
      <view class="menu-group">
        <view class="group-title">系统管理</view>
        <view class="menu-item" @click="goTo('/pages/user/user')">
          <view class="menu-icon-text">
            <uni-icons type="contact" size="20" color="#007bff"></uni-icons>
            <text class="menu-text">用户管理</text>
          </view>
          <uni-icons color="#cfcfcf" type="right" size="16"></uni-icons>
        </view>
        
        <!-- <view class="menu-item" v-if="userInfo.user_type == '00' "  @click="goTo('/pages/role/role')">
          <view class="menu-icon-text">
            <uni-icons type="locked" size="20" color="#007bff"></uni-icons>
            <text class="menu-text">角色管理</text>
          </view>
          <uni-icons color="#cfcfcf" type="right" size="16"></uni-icons>
        </view> -->
        <view class="menu-item" v-if="userInfo.user_type == '00' " @click="goTo('/pages/bumen/bumen')">
          <view class="menu-icon-text">
            <uni-icons type="circle-filled" size="20" color="#007bff"></uni-icons>
            <text class="menu-text">部门管理</text>
          </view>
          <uni-icons color="#cfcfcf" type="right" size="16"></uni-icons>
        </view>
        
        <view class="menu-item" v-if="userInfo.user_type == '00' "  @click="goTo('/pages/job/job')">
          <view class="menu-icon-text">
            <uni-icons type="flag" size="20" color="#007bff"></uni-icons>
            <text class="menu-text">岗位管理</text>
          </view>
          <uni-icons color="#cfcfcf" type="right" size="16"></uni-icons>
        </view>
      </view>
      
      <!-- 基础数据 -->
      <view class="menu-group">
        <view class="group-title">基础数据</view>
        <view class="menu-item" @click="goTo('/pages/mine/school/school')">
          <view class="menu-icon-text">
            <uni-icons type="home" size="20" color="#007bff"></uni-icons>
            <text class="menu-text">学校管理</text>
          </view>
          <uni-icons color="#cfcfcf" type="right" size="16"></uni-icons>
        </view>
        
        <view class="menu-item" @click="goTo('/pages/mine/city/city')">
          <view class="menu-icon-text">
            <uni-icons type="location" size="20" color="#007bff"></uni-icons>
            <text class="menu-text">城市管理</text>
          </view>
          <uni-icons color="#cfcfcf" type="right" size="16"></uni-icons>
        </view>
        
        <view class="menu-item" @click="goTo('/pages/mine/white/white')">
          <view class="menu-icon-text">
            <uni-icons type="paperclip" size="20" color="#007bff"></uni-icons>
            <text class="menu-text">白名单</text>
          </view>
          <uni-icons color="#cfcfcf" type="right" size="16"></uni-icons>
        </view>
      </view>
      
      <!-- 个人设置 -->
      <view class="menu-group">
        <view class="group-title">个人设置</view>
        <view class="menu-item" @click="goTo('/pages/mine/setting/setting')">
          <view class="menu-icon-text">
            <uni-icons type="gear" size="20" color="#007bff"></uni-icons>
            <text class="menu-text">账号设置</text>
          </view>
          <uni-icons color="#cfcfcf" type="right" size="16"></uni-icons>
        </view>
      </view>
    </view>
    
    <!-- 底部操作按钮 -->
    <view class="logout-container">
      <button class="logout-btn" @click="logout">退出登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '张仁菊',
        userId: '2025001',
        avatar: 'https://picsum.photos/200/200?random=1'
      }
    }
  },
  onLoad() {
  	this.getprofile()
  },
  methods: {
	async getprofile(){
		const res = await this.$api.get('/user/profile','',true)
		if(res.data.code === 200) {
			this.userInfo = res.data.data
		}
	},
    editProfile() {
      uni.navigateTo({
        url: '/pages/mine/setting/setting'
      });
    },
    
    goTo(route) {
      uni.navigateTo({
        url: route
      })
    },
    login(){
		uni.reLaunch({
			url:'/pages/login/login'
		})
	},
    logout() {
      uni.showModal({
        title: '确认退出',
        content: '您确定要退出当前账号吗？',
        success: (res) => {
          if (res.confirm) {
			uni.setStorageSync('token','')
            uni.removeStorageSync('userInfo');
            uni.reLaunch({
              url: '/pages/login/login'
            });
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.my-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

/* 个人信息卡片 */
.profile-card {
  background: linear-gradient(to bottom, #007bff, #0056b3);
  border-radius: 0 0 30rpx 30rpx;
  padding: 40rpx 30rpx;
  color: #fff;
  margin-bottom: 30rpx;
}

.avatar-section {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.avatar-container {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
  margin-right: 20rpx;
}

.avatar {
  width: 100%;
  height: 100%;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
  display: block;
}

.user-id {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

.edit-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 数据统计 */
.stats-container {
  display: flex;
  justify-content: space-around;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 16rpx;
  padding: 20rpx 0;
}

.stat-item {
  text-align: center;
  flex: 1;
}

.stat-value {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 6rpx;
  display: block;
}

.stat-label {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

/* 功能菜单 */
.menu-container {
  margin: 0 20rpx 30rpx;
}

.menu-group {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.group-title {
  padding: 20rpx 30rpx;
  font-size: 26rpx;
  color: #999;
  border-bottom: 1rpx solid #f5f5f5;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 30rpx;
  position: relative;
}

.menu-item:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 30rpx;
  right: 30rpx;
  height: 1rpx;
  background-color: #f5f5f5;
}

.menu-icon-text {
  display: flex;
  align-items: center;
}

.menu-text {
  font-size: 28rpx;
  color: #333;
  margin-left: 16rpx;
}

/* 退出登录按钮 */
.logout-container {
  padding: 0 20rpx;
}

.logout-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #fff;
  color: #ff4d4f;
  border-radius: 44rpx;
  font-size: 30rpx;
  border: none;
}

.logout-btn::after {
  border: none;
}
</style>